<template>
	<view class="recharge-page">
		<!-- 背景图（由用户提供） -->
		<view class="bg-image">
			<image src="https://img.jingkakeji.com/img/static/bg.png" mode="aspectFill"></image>
		</view>
		<navgats></navgats>
		<!-- 顶部导航 -->
		<view class="navbar">
			<!-- <view class="back-btn" @click="navigateBack">
        <i class="fa fa-arrow-left"></i>
      </view>
      <view class="title">充值中心</view>
      <view class="balance">
        <text>当前余额: </text>
        <text class="amount">¥{{ userBalance.toFixed(2) }}</text>
      </view> -->
		</view>

		<!-- 主要内容区 -->
		<view class="content">
			<!-- 金额充值 -->
			<view class="recharge-section">
				<view class="section-title">金额充值</view>

				<view class="amount-options">
					<view class="amount-item" v-for="(amount, index) in presetAmounts" :key="index"
						:class="{ 'active': selectedAmount === amount }" @click="selectAmount(amount)">
						¥{{ amount }}
					</view>
				</view>

				<view class="custom-amount">
					<input type="number" placeholder="其他金额" v-model="customAmount" @input="handleCustomAmount">
					<button class="confirm-btn" @click="confirmAmountRecharge">
						确认充值
					</button>
				</view>
			</view>

			<!-- 卡密充值 -->
			<view class="recharge-section">
				<view class="section-title">卡密充值</view>

				<view class="card-code-container">
					<input type="text" placeholder="请输入卡密" v-model="cardCode" class="card-code-input">
					<button class="card-code-btn" @click="confirmCardRecharge">
						卡密充值
					</button>
				</view>
			</view>

			<!-- 扫一扫充值 -->
			<view class="recharge-section scan-section">
				<view class="section-title">扫一扫充值</view>

				<view class="scan-container">
					<!-- 二维码区域（由后端提供图片） -->
					<view class="qrcode-area">
						<image src="https://img.jingkakeji.com/img/static/qrcode-placeholder.png" mode="widthFix" class="qrcode-img"
							:lazy-load="false" alt="充值二维码"></image>
						<view class="qrcode-loading" v-if="isLoadingQrcode">
							<i class="fa fa-spinner fa-spin"></i>
							<text>加载中...</text>
						</view>
					</view>

					<!-- 二维码说明 -->
					<view class="qrcode-info">
						<text>二维码只能使用一次，再次充值请重新选择金额</text>
						<text>如果充值遇到问题，请更换充值方式，或者联系右侧边栏在线客服</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部条款 -->
		<view class="footer-terms">
			<text>网站内禁止转卖饰品</text>
			<text>开箱娱乐请理性消费，切勿上头</text>
			<text>未满十八 (18)岁不得使用本服务</text>
			<text>在充值前请您仔细阅读《用户协议》</text>
			<text>成功充值即代表您对协议无异议</text>
			<text>本人已满18周岁且具备完全行为能力,充值即代表同意 《用户协议》《隐私条款》</text>
		</view>

		<!-- 右侧客服按钮 -->
		<view class="customer-service-btn" @click="openCustomerService">
			<!-- <i class="fa fa-headphones"></i> -->
			<image style="width: 50rpx;height: 50rpx;" src="https://img.jingkakeji.com/img/static/kefu.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import navgats from "../../../Component/navgatsmy/navgatsmy.vue"
	import {
		getCardRecharge
	} from "../../../api/luckys/luckys.js"
	export default {
		data() {
			return {
				// 用户余额
				userBalance: 0.00,

				// 预设充值金额
				presetAmounts: [10, 30, 50, 100, 200, 500],

				// 选中的金额
				selectedAmount: 0,

				// 自定义金额
				customAmount: '',

				// 卡密
				cardCode: '',

				// 二维码加载状态
				isLoadingQrcode: false
			};
		},
		components: {
			navgats
		},
		onLoad() {
			// 模拟加载用户余额
			this.loadUserBalance();

			// 模拟加载二维码
			this.loadQrcode();
		},
		methods: {
			// 返回上一页
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 选择充值金额
			selectAmount(amount) {
				this.selectedAmount = amount;
				this.customAmount = '';

				// 选择金额后重新加载二维码
				this.loadQrcode();
			},

			// 处理自定义金额输入
			handleCustomAmount() {
				if (this.customAmount) {
					this.selectedAmount = 0;
				}
			},

			// 确认金额充值
			confirmAmountRecharge() {
				let amount = this.selectedAmount || parseFloat(this.customAmount);

				if (!amount || amount <= 0) {
					uni.showToast({
						title: '请选择或输入有效金额',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 调用充值接口的逻辑
				uni.showLoading({
					title: '处理中...'
				});

				// 模拟充值请求
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: `成功充值¥${amount}`,
						icon: 'success',
						duration: 2000
					});

					// 更新余额
					this.userBalance += amount;

					// 2秒后返回
					setTimeout(() => {
						this.navigateBack();
					}, 2000);
				}, 1500);
			},

			// 确认卡密充值
			async confirmCardRecharge() {
				if (!this.cardCode) {
					uni.showToast({
						title: '请输入卡密',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 调用卡密充值接口的逻辑
				uni.showLoading({
					title: '验证中...'
				});
				console.log(this.cardCode, "卡密充值记录")
				let data = {
					card: this.cardCode
				}
				let res = await getCardRecharge(data)
				console.log(res)
				if (res.code == 200) {
					setTimeout(() => {
						uni.hideLoading();

						// 这里只是模拟，实际应根据接口返回结果处理
						uni.showToast({
							title: res.message,
							icon: 'success',
							duration: 2000
						});

						// 清空卡密输入
						this.cardCode = '';


					}, 1500);
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					});
				}

			},

			// 加载用户余额
			loadUserBalance() {
				// 模拟接口请求
				setTimeout(() => {
					this.userBalance = 125.50; // 模拟余额
				}, 800);
			},

			// 加载二维码
			loadQrcode() {
				this.isLoadingQrcode = true;

				// 模拟接口请求
				setTimeout(() => {
					this.isLoadingQrcode = false;
					// 实际项目中这里会更新二维码图片地址
				}, 1500);
			},

			// 打开在线客服
			openCustomerService() {
				uni.showToast({
					title: '打开在线客服',
					icon: 'none',
					duration: 2000
				});
				window.open(
					"https://www7c1.53kf.com/webCompany.php?kf_sign=zU5NzMTY5NA3MDE2MDIyOTYzNDM3MDAzNzI4ODkxOTE=&arg=10889191&style=1&language=cn&charset=GBK&kflist=off&kf=&zdkf_type=1&lnk_overflow=0&callback_id6ds=&referer=http%3A%2F%2Flocalhost%3A2300%2FU1-lucky&keyword=http%3A%2F%2Flocalhost%3A2300%2FU1-lucky&tfrom=1&tpl=crystal_blue&uid=3b25cd9bc3f019fa55ba7fb2476e0f3a&is_group=&is_group=&timeStamp=1697597075304&ucust_id="
				)
				// 实际项目中这里会打开客服窗口
			}
		}
	};
</script>

<style scoped>
	.recharge-page {
		min-height: 100vh;
		position: relative;
		color: #fff;
		font-family: 'Helvetica Neue', Arial, sans-serif;
	}

	/* 背景图 */
	.bg-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		z-index: -1;
		filter: brightness(0.5);
	}

	.bg-image image {
		width: 100%;
		height: 100%;
	}

	/* 导航栏 */
	.navbar {
		display: flex;
		height: 30rpx;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 20rpx 20rpx;
		background-color: rgba(0, 0, 0, 0.7);
		border-bottom: 1px solid rgba(100, 100, 255, 0.3);
	}

	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #ccc;
	}

	.back-btn:hover {
		color: #fff;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		text-shadow: 0 0 10rpx rgba(100, 100, 255, 0.8);
	}

	.balance {
		font-size: 28rpx;
		color: #ccc;
	}

	.amount {
		color: #4cd964;
		font-weight: bold;
	}

	/* 主要内容区 */
	.content {
		padding: 30rpx 20rpx;
	}

	/* 充值区块通用样式 */
	.recharge-section {
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		border: 1px solid rgba(100, 100, 255, 0.2);
		box-shadow: 0 0 20rpx rgba(100, 100, 255, 0.1);
		backdrop-filter: blur(10rpx);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		color: #fff;
		padding-bottom: 15rpx;
		border-bottom: 1px solid rgba(100, 100, 255, 0.3);
		position: relative;
	}

	.section-title::after {
		content: '';
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 80rpx;
		height: 2rpx;
		background-color: #6666ff;
		box-shadow: 0 0 10rpx #6666ff;
	}

	/* 金额选项 */
	.amount-options {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.amount-item {
		width: 140rpx;
		height: 80rpx;
		background-color: rgba(30, 30, 50, 0.7);
		border: 1px solid rgba(100, 100, 255, 0.3);
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.amount-item:hover {
		border-color: #6666ff;
		transform: translateY(-2rpx);
		box-shadow: 0 0 10rpx rgba(100, 100, 255, 0.5);
	}

	.amount-item.active {
		background-color: rgba(100, 100, 255, 0.3);
		border-color: #6666ff;
		box-shadow: 0 0 15rpx rgba(100, 100, 255, 0.7);
		font-weight: bold;
	}

	/* 自定义金额 */
	.custom-amount {
		display: flex;
		gap: 20rpx;
	}

	.custom-amount input {
		flex: 1;
		height: 80rpx;
		background-color: rgba(30, 30, 50, 0.7);
		border: 1px solid rgba(100, 100, 255, 0.3);
		border-radius: 8rpx;
		padding: 0 20rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.confirm-btn {
		width: 160rpx;
		height: 80rpx;
		background-color: #6666ff;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.confirm-btn:hover {
		background-color: #7777ff;
		box-shadow: 0 0 15rpx rgba(100, 100, 255, 0.7);
		transform: translateY(-2rpx);
	}

	/* 卡密充值 */
	.card-code-container {
		display: flex;
		gap: 20rpx;
	}

	.card-code-input {
		flex: 1;
		height: 80rpx;
		background-color: rgba(30, 30, 50, 0.7);
		border: 1px solid rgba(100, 100, 255, 0.3);
		border-radius: 8rpx;
		padding: 0 20rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.card-code-btn {
		width: 160rpx;
		height: 80rpx;
		background-color: #4cd964;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.card-code-btn:hover {
		background-color: #5ce875;
		box-shadow: 0 0 15rpx rgba(76, 217, 100, 0.7);
		transform: translateY(-2rpx);
	}

	/* 扫一扫充值 */
	.scan-section {
		margin-bottom: 60rpx;
	}

	.scan-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qrcode-area {
		width: 300rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		position: relative;
		overflow: hidden;
		box-shadow: 0 0 20rpx rgba(100, 100, 255, 0.3);
	}

	.qrcode-img {
		width: 280rpx;
		height: 280rpx;
	}

	.qrcode-loading {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 15rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.qrcode-info {
		width: 100%;
		font-size: 24rpx;
		color: #ccc;
		line-height: 1.6;
		text-align: center;
	}

	.qrcode-info text {
		display: block;
		margin-bottom: 10rpx;
	}

	/* 底部条款 */
	.footer-terms {
		background-color: rgba(0, 0, 0, 0.8);
		padding: 30rpx 20rpx;
		font-size: 22rpx;
		color: #999;
		line-height: 1.8;
		border-top: 1px solid rgba(100, 100, 255, 0.3);
	}

	.footer-terms text {
		display: block;
		text-align: center;
	}

	/* 右侧客服按钮 */
	.customer-service-btn {
		position: fixed;
		right: 30rpx;
		bottom: 200rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: #6666ff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #fff;
		box-shadow: 0 0 20rpx rgba(100, 100, 255, 0.7);
		z-index: 99;
		transition: all 0.3s ease;
	}

	.customer-service-btn:hover {
		transform: scale(1.1);
		box-shadow: 0 0 25rpx rgba(100, 100, 255, 0.9);
	}
</style>